    {% block css %}
    <style>

    a{
        text-decoration: none;
    }
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 30px; /* 增加内边距以增高导航条 */
        background-color: rgba(0, 0, 0, 0.7); /* 设置为黑色背景 */
        color: #ffffff; /* 文本颜色设置为白色 */
        border-bottom: none; /* 移除底部边框，因为黑色背景下不明显 */
    }

    .navbar-brand {
        display: flex;
        align-items: center;
    }

    .navbar-logo {
        height: 64px; /* 增大logo大小 */
        width: auto;
    }

    .navbar-search {
        flex: 1;
        padding: 10px 20px; /* 增大内边距以增大搜索框 */
        font-size: 18px; /* 增大字体大小 */
        border: none; /* 移除边框，因为黑色背景下不明显，可以添加其他样式如阴影 */
        border-radius: 20px; /* 增大圆角以匹配更大的搜索框 */
        box-sizing: border-box;
        background-color: rgba(255, 255, 255, 0.1); /* 可选：添加半透明背景以增加对比度 */
        color: #ffffff; /* 确保搜索框内文本颜色为白色 */
    }

    .navbar-search::placeholder {
        color: #cccccc; /* 设置占位符文本颜色为较浅的灰色 */
    }

    .navbar-tabs {
        display: flex;
        gap: 20px; /* 增大选项卡之间的间距 */
    }

    .navbar-tab {
        text-decoration: none;
        color: #ffffff; /* 确保选项卡文本颜色为白色 */
        padding: 12px 24px; /* 增大内边距以匹配更高的导航条 */
        border-radius: 4px;
        transition: background-color 0.3s;
    }

    .navbar-tab:hover {
        background-color: rgba(255, 255, 255, 0.6); /* 鼠标悬停时添加半透明背景 */
        text-decoration: none;

    }


    .nav{
        margin-top: -20px;
    }

    .nav-centered {
        list-style-type: none; /* 移除默认的列表样式 */
        padding: 0;
        display: flex; /* 使用flex布局 */
        justify-content: center; /* 子元素水平居中 */
        background-color: white; /* 背景色为白色 */
        border-radius: 5px; /* 可选：添加圆角 */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 可选：添加阴影 */
    }

    .nav-centered li {
        margin: 0 10px; /* 可选：为列表项添加间距 */
    }

    .nav-centered a {
        text-decoration: none; /* 移除链接下划线 */
        color: #333; /* 设置链接文字颜色 */
        padding: 10px 15px; /* 为链接添加内边距 */
        display: block; /* 使链接充满整个li元素 */
    }

    .nav-centered a:hover {
        background-color: white; /* 链接悬停时背景变色 */
        border-radius: 5px; /* 可选：添加圆角 */
        color: black;
    }



    .dropdown-menu{
        width: 600px;

    }
    .menus{
        float: left;
    }



    .head_img{
        width: 40px;
        padding: 0;
        height: 40px;
    }
    .head_img img{
        list-style: none;
        border-radius: 50%;
        width: 40px;
        height: 40px;
    }

    .allhead{
        position: relative;
    }
    .firsthead{
        position: absolute;
        left: 40px;
    }
    .lasthead{
        position: absolute;
        right: 40px;
    }

    .bix{
        position: fixed;
        top: 130px;
        width: 100%;
        background-color: black;
    }
    .bix li a{
        color: white;
    }
    .ddd{
        display: flex;
        justify-content: space-around;
    }
        </style>
    {% endblock %}




    {% block body %}
    <!--导航条-->
    <div class="navbar allhead " >
        <div class="navbar-brand  firsthead" >
            <a href="{% url 'main:index' %}"><img src="/static/img/logo1.png" alt="Udemy Logo" class="navbar-logo"></a>
        </div>
            <form method='get' action="/search/" target="_blank">
            <input type="text" class="navbar-search" placeholder="搜索任何内容" name="q">

            </form>
        <div class="navbar-tabs  lasthead">
            {% if request.user.is_authenticated %}
            <a href="{% url 'operation:collect' %}" class="navbar-tab">我的收藏</a>
            <a href="{% url 'operation:buy_order' %}" class="navbar-tab">我的订单</a>
            <a href="{% url 'user:center' %}" class="navbar-tab  head_img"><img src="/media/{{ request.user.head }}" class=""></a>
            {% else %}
            <a href="{% url 'user:login' %}" class="navbar-tab">登录</a>
            <a href="{% url 'user:register' %}" class="navbar-tab">注册</a>
            {% endif %}
        </div>
    </div>



    <!--标签导航-->
        <ul class="nav nav-tabs nav-centered ">
            {% for e in categorys %}
                <li role="presentation" class="dropdown  cccc">
                    <a href="{% url 'main:category_page' e.id e.id %}"  >
                        {{ e.title }}
                    </a>
                    <ul class="dropdown-menu bix ">
                        <div class="row col-md-8 col-md-offset-2 ddd">
                            {% for tags in e.tag_set.all %}
                            <li class="menus " ><a href="{% url 'main:tag_page' tags.id %}" >{{ tags }}</a></li>
                            {% endfor %}
                        </div>

                  </ul>
                </li>
            {% endfor %}
        </ul>


    {% endblock %}
